<template>
	<view style="background-color: #ff8548;height: 100vh;">
		<view :style="{height: statusBarHeight+'px'}"></view>
		<view style="color: #f6f6f6;padding: 40rpx;">
			<view style=""@click="topleftClick">
				<u-icon name="arrow-left"size="45"color="#ffffff"></u-icon>
			</view>
			<view style="margin: 40rpx;">
				<h2>登录</h2>
				<h2 style="margin: 10rpx 0 100rpx 0;">西红柿小说带你阅读世界</h2>
			</view>
		</view>
		<view style="background-color: #FFFFFF;border-radius: 1.5em;height: 80%;
		padding: 100rpx;">
			<view>
				<view style="color: #808080;font-size: 30rpx;">手机号:</view>
				<u-input placeholder="请输入手机号" style="border-bottom: 1rpx #808080 solid;"
				type="number" maxlength="11" v-model="phone"></u-input>
			</view>
			<view style="margin-top: 50rpx;">
				<view style="color: #808080;font-size: 30rpx;">密码</view>
				<u-input placeholder="请输入密码" style="border-bottom: 1rpx #808080 solid;"
				type="password" v-model="password"></u-input>
			</view>
			<view style="background-color: #fc6b2c; padding: 30rpx 30rpx;border-radius: 2em;
			font-weight: bold;color: #fffbef;width: 550rpx;text-align: center;margin: 50rpx 0;
			font-size: 29rpx;" @click="logonClick">
				<text>立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:0,
				phone:"",
				password:""
			}
		},
		mounted() {
			let that = this
			//获取手机系统信息
			const info = uni.getSystemInfoSync()
			//设置状态栏高度
			that.statusBarHeight = info.statusBarHeight
			
		},
		methods: {
			topleftClick(){
				uni.switchTab({
					url:"../wod"
				})
			},
			async logonClick(){
				if(this.phone == "" || this.password == ""){
					return uni.showToast({
						title:"不能为空",
						icon:"error"
					})
				}else if(this.phone.length != 11){
					return uni.showToast({
						title:"手机号填写不规范",
						icon:"error"
					})
				}
				const res=await this.$myRequst({
					url:"/user/get/phone?phone="+this.phone+"&password="+this.password
				})
				console.log(res.data)
				if(res.data.data == undefined){
					return uni.showToast({
						title:"无此账户信息",
						icon:"error"
					})
				}else{
					uni.setStorageSync("userId",res.data.data.id)
					uni.showToast({
						title:"登录成功",
						success: (res) => {
							setTimeout((res)=>{
								uni.switchTab({
									url:"../wod"
								})
							},1000)
						}
					})
				}
			}
		}
	}
</script>

<style>

</style>
